<template>
  <m-container bg="#fff">
    <view class="eidt">
      <m-cell-group :inset="false">
        <m-cell title="头像">
          <template v-slot:link>
            <button open-type="chooseAvatar" @chooseavatar="handleBindchooseavatar" class="btn">
              <u-image show-loading :src="getAvatar(model.avatar)" width="104rpx" height="104rpx" shape="circle">
                <u-icon slot="error" name="account-fill"></u-icon>
              </u-image>
            </button>
          </template>
        </m-cell>
        <m-cell title="昵称">
          <template v-slot:link>
            <input
              v-model="model.nickName"
              type="nickname"
              style="font-size: 24rpx; text-align: right"
              placeholder="请输入昵称"
            />
          </template>
        </m-cell>
        <m-cell title="性别" is-link :desc="genderMap[model.gender]" @click="visible = true"> </m-cell>
        <m-cell title="生日" is-link @click="showPicker = true">
          <template v-slot:link>
            <m-text v-if="model.birthday" :key="model.birthday" filter="parseTime" :filter-text="model.birthday" />
            <m-text v-else>请选择您的生日</m-text>
          </template>
        </m-cell>
      </m-cell-group>

      <view class="eidt__box">
        <u-image show-loading src="@/static/appointment_tips.png" width="330rpx" height="340rpx"></u-image>
        <view class="eidt__box__btn">
          <u-button type="primary" @click="handleClick" shape="circle" ripple :custom-style="{ marginTop: '80rpx' }"
            >提交</u-button
          >
        </view>
      </view>
    </view>

    <m-action-sheet :visible.sync="visible" :menu-items="menuItems" cancel-txt="取消" @choose="handleChoose" />
    <m-date-picker
      v-model="model.birthday"
      :visible.sync="showPicker"
      title="选择日期"
      confirm-text="确定"
      poppable
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="handleConfirm"
    >
    </m-date-picker>
  </m-container>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from '@vue/composition-api'
import store from '@/store/index'
import day from 'dayjs'
import { onLoad } from 'uni-composition-api'
import { router } from '@/router'
import { profile, getInfo } from '@/api/modules/login'
import getAvatar from '@/utils/get-avatar'

export default defineComponent({
  setup() {
    const info = computed(() => (store as any).getters['login/getUserInfo'])
    const state = reactive({
      getAvatar,
      model: {
        birthday: '' as any,
        gender: '',
        nickName: '',
        avatar: '',
      },
      minDate: day().subtract(120, 'year').format('YYYY-MM-DD'),
      maxDate: day().format('YYYY-MM-DD'),
      visible: false,
      showPicker: false,
      genderMap: {
        0: '男',
        1: '女',
      },
      menuItems: [
        {
          name: '男',
          value: '0',
        },
        {
          name: '女',
          value: '1',
        },
      ],
    })

    onLoad(() => {
      const { birthday, sex, nickName, avatar } = info.value
      state.model = {
        birthday,
        gender: sex,
        nickName,
        avatar,
      }
    })

    const handleChoose = (e) => {
      state.model.gender = e.value
    }

    const handleClick = async () => {
      const { gender: sex, nickName, avatar, birthday } = state.model
      const res = await getInfo()
      await profile({
        ...res.user,
        sex,
        nickName,
        birthday,
        avatar,
      })
      await store.dispatch('login/getUserInfo')
      router.pushTab({
        name: 'Profile',
      })
    }

    const handleConfirm = (label, birthday) => {
      state.model.birthday = day(birthday).format('YYYY-MM-DD')
    }

    const handleBindchooseavatar = (e) => {
      state.model.avatar =
        'data:image/jpeg;base64,' + uni.getFileSystemManager().readFileSync(e.detail.avatarUrl, 'base64')
    }

    return {
      ...toRefs(state),
      handleChoose,
      handleConfirm,
      handleClick,
      handleBindchooseavatar,
    }
  },
})
</script>
<style lang="scss" scoped>
.eidt {
  &__box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100rpx;
    padding: 30rpx;
    &__btn {
      margin-top: 50rpx;
      width: 100%;
    }
  }

  .btn {
    background: transparent;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #fff;
    justify-content: space-between;
    line-height: unset;
    &__left {
      display: flex;
    }

    &::after {
      border-width: 0;
    }
  }
}
</style>
